<template>
  <div id="List" class="w-full min-h-[300px] text-white text-xs">
    <nav class="leading-5">
      <h1 class="my-5 lg:my-8 text-2xl font-semibold">{{ $mt('Latest News') }}</h1>
      <!--      <nuxt-link :to="`/article/list/${item.id}`" v-for="item in articleCategories">{{ item.name }}</nuxt-link>-->
    </nav>
    <section class="w-full min-h-[400px]">
      <nuxt-link
        external
        class="flex items-start mb-4 w-full bg-[#74757a54] lg:bg-transparent rounded-md lg:rounded-none border-b-neutral-700 border-b py-4 px-3 box-border"
        :to="$localePath(`/article/${item.urlName || item.id}`)"
        v-for="(item, index) in articleList"
        :key="item.id">
        <div class="text-base shrink-0 text-[#ff6011] w-[8%] lg:w-[4%]">
          {{ index + 1 >= 10 ? index + 1 : (index + 1).toString().padStart(2, '0') }}
        </div>
        <!-- 图片 -->
        <y-image
          class="w-[90px] mr-2 shrink-0 lg:mr-3 h-16 lg:w-[150px] lg:h-[80px] rounded-md"
          width="150"
          height="80"
          fit="cover"
          :src="$withPicOrigin(item.imageUrl)"
          :alt="item.title" />
        <div class="flex-1 overflow-hidden">
          <h2 class="w-full text-base mb-1 lg:mb-2 font-medium line-clamp-1">
            {{ item.title }}
          </h2>
          <p class="hidden lg:block text-gray my-2">
            BitTopup Game News | {{ dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
          </p>
          <p class="w-full text-[#9899a5] line-clamp-2 lg:line-clamp-2" v-if="item.shortContent">
            {{ item.shortContent }}
          </p>
        </div>
      </nuxt-link>
    </section>
    <footer class="flex justify-end">
      <van-pagination :total-items="totalItems" class="w-full lg:w-[200px]" :model-value="curPage" mode="simple">
        <template #prev-text>
          <nuxt-link
            class="w-full h-full flex items-center justify-center"
            :class="{ 'pointer-events-none': curPage === 1 }"
            external
            :href="$localePath(`/article/list/${Math.max(1, curPage - 1)}`)">
            <van-icon name="arrow-left" />
          </nuxt-link>
        </template>
        <template #next-text>
          <nuxt-link
            external
            class="w-full h-full flex items-center justify-center"
            :class="{ 'pointer-events-none': totalPages === curPage }"
            :href="$localePath(`/article/list/${Math.min(totalPages, curPage + 1)}`)">
            <van-icon name="arrow" />
          </nuxt-link>
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </footer>
  </div>
</template>
<script setup lang="ts">
import { useArticleStore } from '~/store/article'
import YImage from '~/components/logic/YImage.vue'
import dayjs from 'dayjs'

const route = useRoute()
let { curPage = 1 } = useRoute().params as any
curPage = +curPage
const articleStore = useArticleStore()
const articleList = ref([])
const totalItems = ref(0)
const totalPages = computed(() => Math.ceil(totalItems.value / 10))
// 文章列表
const { data } = await useAsyncData(async () => articleStore.getArticlesByCategoryId('', curPage, 10), {
  default: () => {},
})
articleList.value = data.value?.data
totalItems.value = data.value?.totalElements
const { $mt } = useCommonPlugin()
const seoTitle = `BitTopup - ${$mt('Gift Card News and Updates')}${route.params.curPage ? ` - Page ${curPage} of ${totalPages.value}` : ''}`
const seoDescription =
  $mt(
    'Explore the latest in gift card trends, market insights, and industry news. Stay ahead with our comprehensive coverage on gift card options, usage tips, and promotional offers. Ideal for shoppers and retailers alike.',
  ) + `Page ${curPage} of ${totalPages.value}`
useSeoMeta({
  title: seoTitle,
  ogTitle: seoTitle,
  description: seoDescription,
  ogDescription: seoDescription,
  ogImage: 'https://bittopup.com/logo.png',
  twitterCard: 'summary_large_image',
})
</script>

<style scoped lang="scss">
#List {
  :deep(.van-pagination__item) {
    color: #fff;
    background: #35393b;
    border: 0;
    //border-radius: 12px;
  }

  :deep(.van-hairline--surround:after) {
    display: none;
  }

  :deep(.van-pagination__items) {
    display: flex;
  }
}
</style>
